Sachin's Projects

Parallax web design

Story:

One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth. Here is a sample: Just a sample!

After I left my job for studies at Purdue, I started doing some freelancing. During that break (well, not so much!), I worked for a fitness food delivery firm called Fitness-bowl.com. The client wanted some creative, yet rich with user experience(Ah yes! The usual demand!) interface to show some of the food items provided by them. I showed the sample which I talked about a while ago, and he was very impressed with it. While the website was being designed, we had already conducted the user research to gather responses and draft persona. We used the data to analyze which kind of interface would fare well. Thats how this design came into picture.

Design:

Using the data from research and person in mind, I came up with multiple paper concepts. Then we selected as a team (design thinking), the design which suited the most. We designed the High_fidelity using Jquery, Javascript and Bootstrap framework for CSS. Below is how it looks! Parallax Webpage

 Parallax example

Takeaway:

One of the biggest takeaway was power of team work. Team work for concept design utilized so many great ideas, which ofcourse had some usability issues. I fixed most of them. On contrast to popular notion that visually rich user interfaces hamper the experience, this design proved beneficial for marketing and in improving customer number. My client was often told that, the gallery looks so delicious!

Balsamiq Interactive Mockups

In manufacturing and design, a mockup, or mock-up, is a scale or full-size model of a design or device, used for teaching, demonstration, design evaluation, promotion, and other purposes. A mockup is a prototype if it provides at least part of the functionality of a system and enables testing of a design.

Story:

When client talked to me about developing the website to enforce his business plan, he mentioned that he had no idea about web development, UX or any of the stuff. Since I had some experience with UX design, I suggested some quick, less-expensive but reliable methods to implement his website. He wanted very minimal things, such as gallery, his contact and some other small features. His main concentration was attracting customers and ofcourse awe them with "Wow"

Design:

Persona is a very important parameter for such implementations. First step was to create a scenario.

"Veer is a tele-series actor who has worked in many famous series. Keeping his body tonned is one the important thing he does on a typical day. He visits gym everyday but is not sure if that is just enough. He asks his trainer about the diet and all he does is talk in terms of calories. To keep a tab of food, its just too much. He is looking for an offer where he can just order food in terms of calores, yet delicious, different and delivered on time. He wants to choose on different options and food packages. One habit he has is to study about the credibility of the firm which delivers food. He wants it be trustworthy and worth the money and time"
Later on, we arranged a design thinking session (at a private room of restuarant) and came up with MVP's for the design. Next, we came up with multiple concepts on paper for each of the feature, we call it the conceptual design phase. There is where the creativity flows around. I enjoy this phase, I feel like an inventor, ofcourse we designers are! 34 different concepts were designed in total, for about 7 features. Once the concepts were confirmed (nothing is confirmed absolutely, its agile) we moved to Rapid prototyping of the website. We subjected prototype to usability test to find some issues and fixed them.

 Balsamiq-Mockup

Takeaway:

Major takeaway here was, never get too attached to your design. Yes! I had created so many innovative designs, but client declined them, either because it was too flashy, or it had complex steps involved. Even the time matters a lot, since this had short development period, trade-off on usability was not an option. Another lesson was, how beneficial are these design thinking sessions? I say very much! We draft MVP, client was so happy that he is being involved in all the phases. "Its just like seeing a child growing up infront of you" - the client said.

Interaction and Storyboard design

Story:

America’s Best Communities competition is a $10 million initiative to stimulate economic revitalization in small towns and cities. Each community will be awarded $50,000 to develop comprehensive strategies to accelerate the revival of their local economies and improve quality of life.

The team from Lafayette is one of the top 50 finalists in the country, and we, Purdue university were clients for development of VR game, they wanted to present as part of contest. Website: America's Best Communities
They wanted to develop a game which involves kids and educate them. This was not traditional educational game instead, it was to be casual yet subtly educative. They wanted to develop VR game which could effectively catch kids' attention and we were certainly up for it!

Design:

We approached the task with focus group interviews of teachers involved and interviews of kids (handled by experts in that field). After the data reached saturation we organized brainstorming session, what I like to call as design thinking session. We discussed on various concepts, we were locked up in Purdue Envision Center for hours and we finally came up with a concept. A story of an egg! We discussed about various possibilities of implementation of the concepts, I noted all the flows. My job was to create an interaction design for the project. Interaction design for a game involves all the logical flows of the game incorporated by storyboard. After multiple iterations we agreed upon a final design and was ready for game design! Check the video demo and Storyboard sample below!

Takeaway:

This was a very new experience for me, which wanted to have. I absolutely am a game freak (Masters is cutting down on that for me) and wanted to work on interaction design in this field. Its lot easier to imagine storyboard for the games compared to a traditional application. But downside is its difficult to apply the design heuristics that I am aware of. It took lot of brainstorming by time as well as from my side to come up with an optimal design decision. Cognition has a major foreplay in such design, expecially high-level, which includes low-lever (incase of games) as well. Once we started concentrating on that, we were at a better position of design phase.

 Storyboard for contest

 Sample storyboard for Tetris

Formative research

A Survey was conducted within the campus to in order to develop an application to help STEM students graduate on time. We interpreted data and created affinity diagram for Persona draft.

The report was completely designed by me (looks and feel) and the content was combined effort of my team. We drafted persona based on the results, all ready for prototype design

 Formative research

Knowledge Depot

Discussion Forum

A simple, sleek, and intuitive website to get all the questions answered. That was the aim we had, when we developed this application within period of 2 weeks for a Hackathon. I lead the team, while owning the UI design completely.

The aim of the Hackathon was to instigate innovation, promote design thinking and simpllicity to get an usable application, which is nippy, easy to integrate and completely responsive.

We called the application, Knowledge Depot. The application leverages most advanced technologies available, since I am a .net developer, I used ASP.NET MVC 5 as the platform. Other technologies used in the applications are SignalR, Lucene indexing (a high speed search engine), ACE cloudjs.

We focused mainly on ease of use, in other terms, delivering ultimate user experience. The application has two important terminals, that is, online terminal and meeting terminal.

Online terminal

Meeting terminal

UIJAM

We integrated in-browser HTML/Javascript/CSS editor. Where, an user may upload desired CSS file, or add CSS rules, add required JQuery/Javascript rules and write any HTML and download it, with integration ready in their application.

Here are few screen shots with sleek supercool UI, which is a clean outcome of detailed design thinking session and stress on User Experience.

Live tile, with description of each terminal

Discussion list, which is ordered by date

Category list, which displays all category

Intelligent index. As soon as new topic is typed, if duplicate, search engine prompts a message.

Admin overview page: An intuitive and responsive, tile model based Admin dashboard

Admin side menu panel, which becomes hidden in responsive mode

Tree view to give great experience, while adding or removing category

hidden side navigation in responsive view, to save space and for better display

UI jam tool, to edit and export, even on the go through mobile or tablet.

Unity Game Development

Unity is a flexible and powerful development platform for creating multiplatform 3D and 2D games and interactive experiences.

This is a sample game, developed using Unity game development engine. The project is developed from the scratch, including all the graphic design, assets, sprites and C# script for logic.

In the below link, the source code is included as well. This sample is part of a big project, which I hope to publish, soon after the development is complete. The completed project includes coin collection, life addition, when coins are collected, jump, enemies, a UI for starting interface of game and much more.

The game is multiplatform, which can be exported into MAC, Linux, Windows as respective executables, as well as HTML 5 game. The below link is a live browser game. Click the link and allow the plugin in the browser. The plugin will install unity webplayer to browser, then you are free to test the dev build of game, which includes movement animation of character, static animation and scene loads.

Click arrow keys on keyboard to move!

Click here for game sample, ready and running!

 Source code for game

 Published code for game

Conceptual Design

Formative research has been done, now what? This is where the conceptual design comes into picture. Ofcourse there are couple of other important steps that needs to be done before a design for the application is conducted. We need to look back and see what exactly is the problem statement, what is the scope and the vision for the application. From the personas, a primary persona shall be carefully selected. There are number of ways for this to be done, popular one is, to check what are some of common pain points for persona of interest. This gives an idea to pick the primary persona. From that a requirment list or MVP (Most Viable Products) for the project can be picked. We are working on agile methodology, so rest of the requirements can be pushed to the project backlog for future development.

Typical several hundreds of concepts were created from the requirment, each representing the functionality of the product. We need not implement all of them. Later we can discuss as a team to pick few concepts that are most suitable. This can be done with another design thinking session as well. Example for conceptual design is as follows, for this particular project.

When hundreds of concepts are being designed, at some point we are bound to reach saturation. Same thing happened to us as well. So we used design cards. These are some design twist cards, which give specific instructions, which can be used to do a drastic modification to one of the designs. This can prove extremely useful or sometimes may give awkward solution, but these are just concepts, it upto us later on to choose what goes into the product. There are some extreme cards such as critical design cards, they bring drastic and challanging tasks to the design which are very interesting. Following is the example of cards we used in the project.

Then as a team we discussed and decided on the designs which best fits the need, vision statement and requirements. Below is the balsamiq mock up of the product.

 Application_Mockup

Detailed report of the conceptual design is as follows

Brief overview of entire project.